<template>
    <div>
        <mt-header class="plain" title="忘记密码">
            <mt-button icon="back" slot="left" @click="goBack">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>

        <div class="info-container">
            <div class="option-item">
                <mt-field label="手机号" class="spec" v-model.trim="info.phoneNo">
                    <mt-button @click="getValidCode" :disabled="valideCodeEnabled === false" style="margin: 0 3px; font-size: 14px;">{{validText}}</mt-button>
                </mt-field>
            </div>
            <div class="option-item">
                <mt-field label="验证码" type="text" class="spec" v-model="info.validCode"></mt-field>
            </div>
            <div class="option-item">
                <mt-field label="新密码" type="password" class="spec" v-model="info.password"></mt-field>
            </div>
            <div class="option-item">
                <mt-field label="确认密码" type="password" class="spec" v-model="info.rePassword"></mt-field>
            </div>
            <div class="info-desc color-secondary text-left">
                密码必须至少8个字符，而且同时包含字母和数字
            </div>
            <div class="info-button">
                <mt-button type="primary" style="width: 160px; height: 45px;" @click="submit">确定</mt-button>
            </div>
        </div>
    </div>
</template>

<script>

import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import utils from '@/utils'
import userApi from '@/api/user'

export default {
    data() {
        return {
            info: {
                phoneNo: '',
                validCode: '',
                password: '',
                rePassword: ''
            },
            userInfo: {},
            validTextDefault: '获取验证码',
            validText: '获取验证码',
            valideCodeEnabled: true
        };
    },

    created() {
        this.userInfo = utils.get('USER_INFO') || {};
        this.info.phoneNo = this.userInfo.phoneNo;
    },

    methods: {

        formatParams() {
             let data = {
                params: {
                    phoneno: this.info.phoneNo,
                    newpassword: this.info.password
                },
                headers: {}
            }

            data.headers[Const.H_VERIFICATION_SMS] = this.info.validCode;
            data.headers[Const.H_VERIFICATION_SMS_TOKEN] = this.info.validCode;

            return data;
        },

        getValidCode() {
            // validation...
            if (this.valideCodeEnabled === false || !this.formValidate('phoneNo')) {
                return;
            }

            let timeId = utils.toggleValidCodeBtn(this);
            
            let data = {};
            data.params = {
                phoneno: this.info.phoneNo,
                usage: Const.USAGE_MODIFIY_PWD
            };
            data.headers = {};
            data.headers[Const.H_VERIFICATION] = '';
            userApi.getValidCode(data).then(resp => {
                // TODO:
                this.info.validCode = resp[Const.RESP_RESULT] || '';
                this.info.validCodeToken = resp[Const.RESP_RESULT] || '';
                Toast(resp[Const.RESP_MESSAGE]);
            }).catch(resp => {
                Toast(resp[Const.RESP_MESSAGE]);
                this.validText = this.validTextDefault;
                utils.toggleValidCodeBtn(this, timeId);
            });

        },
        
        formValidate(field) {
            if ((!field || field.indexOf('phoneNo') >= 0) && !this.info.phoneNo) {
                Toast('请填写手机号');
                return false;
            }

            if ((!field || field.indexOf('phoneNo') >= 0) &&!/[0-9]{11}/.test(this.info.phoneNo)) {
                Toast('请填写正确手机号');
                return false;
            }

            if ((!field || field.indexOf('validCode') >= 0) &&!this.info.validCode) {
                Toast('请填写验证码');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && !this.info.password) {
                Toast('请填写密码');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && this.info.password.length < 8) {
                Toast('密码至少包含8个字符');
                return false;
            }

            if ((!field || field.indexOf('password') >= 0) && !/^[-0-9a-zA-Z!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~]+$/.test(this.info.password)) {
                Toast('密码只能包含数字、字母和常见字符');
                return false;
            }

            if ((!field || field.indexOf('rePassword') >= 0) && this.info.password != this.info.rePassword) {
                Toast('两次输入的密码不一致');
                return false;
            }

            return true;
        },


        submit() {

            // validation...
            if (!this.formValidate()) {
                return;
            }

            userApi.forgetPassword(this.formatParams()).then(resp => {
                this.$router.replace('/personal/setting/account');
            }).catch(resp => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
                }
            });
        },

        goBack() {
            this.$router.replace('/personal/setting/password/change')
        },
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {
    margin-left: $offset-x;
    margin-right: $offset-x;
    padding-top: 8px;
    border-top: 1px solid #dddddd;
    
    .info-avatar {
        margin: 24px 0 36px 0;
        img {
            width: 60px;
            height: 60px;
        }
    }

    .option-item {
        height: 48px;
        border-bottom: 1px solid #dddddd;
        font-size: 14px * $scale;
        text-align: left;
        color: #333333;
    }

    .info-desc {
        padding: 24px 0 18px 0;
        font-size: 12px * $scale;
    }

    .info-button {
        margin: 56px 0;
    }
}
</style>
